.v-form-design {
  overflow: hidden;
  .xy-center {
    @apply v-flex v-justify-center v-items-center;
  }

  .ant-collapse-content > .ant-collapse-content-box {
    padding: 6px;
  }
  .wh-full {
    width: 100%;
    height: 100%;
  }
  .position-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .layout-box {
    overflow: hidden;
    border: 1px dashed #ccc;
  }
  .drag-move-box {
    min-height: 36px;
    &:hover {
      background-color: var(--hover-primary-color);
    }
    // 选择时 start
    &::before {
      @apply v-bg-primary v-absolute v-top-0 v-transition-all v-w-full v-h-5;
      content: '';
      right: -100%;
    }

    &.active {
      &::before {
        right: 0;
      }
      background: var(--hover-primary-color);
      outline-offset: 0;
    }
    // 选择时 end
    .form-item-box {
      position: relative;
      word-wrap: break-word;
      &::before {
        @apply v-absolute v-h-full v-w-full v-top-0 v-left-0;
        content: '';
        z-index: 888;
      }
      .ant-form-item {
        margin: 0;
        padding-bottom: 6px;
      }
    }
    .show-key-box {
      // 显示key
      @apply v-absolute v-bottom-2 v-right-2;
      font-size: 14px;
      z-index: 999;
      color: var(--primary-color);
    }
    .copy,
    .delete {
      @apply v-absolute v-top-0 v-w-30 v-h-30 v-text-center;
      line-height: 30px;
      color: #fff;
      z-index: 989;
      transition: all 0.3s;
      &.unactivated {
        opacity: 0 !important;
        pointer-events: none;
      }
      &.active {
        opacity: 1 !important;
      }
    }
    .copy {
      @apply v-bg-primary;
      border-radius: 0 0 0 8px;
      right: 30px;
    }

    .delete {
      @apply v-bg-primary;
      right: 0;
    }
  }

  // antd 样式重置
  .ant-input-number{
    width: 100%;
  }


  ::-webkit-scrollbar {
    background-color: rgba(27, 27, 27, 0.4);
    border-radius: 10px;
    width: 3px; //y轴滚动条宽度
    height: 3px; //x轴滚动条高度
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px; //滚动条的圆角
    background: rgb(63, 94, 251);
    background: radial-gradient(
      circle,
      rgba(63, 94, 251, 1) 0%,
      rgba(252, 70, 107, 1) 100%
    );
    //  background: var(--primary-color); //滚动条的背景颜色
  }

  ::-webkit-scrollbar-track {
    border-radius: 10px; //滚动条的背景区域的圆角
    background: rgba(255, 255, 255, 0.44); //滚动条的背景颜色
  }
}
